<template>
    <div class="body">
        <div class="logo">
            <div>
                <img src="@/assets/红细胞.png" class="logoImage">
            </div>
            <div class="logoText">红细胞工作室</div>
        </div>
        <!--检测页面 -->
        <div class="checkTop">
            <!-- 摄像头 -->
            <div class="checkImage">
                <!-- 显示摄像头画面，即使 serverImage 存在 -->
                <video v-show="!serverImage" ref="cameraFeed" autoplay class="video-display"></video>

                <!-- 如果 serverImage 存在，则显示服务器返回的图像 -->
                <img v-show="serverImage" :src="serverImage" class="video-display" alt="服务器返回的图像" />
            </div>

            <!-- 实时检测 -->
            <div>
                <div class="inputCode">
                    <div class="inputCodeText">工控机编号:</div>
                    <input type="text" v-model="camera_id" placeholder=camera_id class="inputBox" />
                </div>
                <div class="resultList">
                    <div class="resultHeader">实时结果</div>
                    <div class="table">
                        <div class="tableHeader">
                            <div class="column">编号</div>
                            <div class="column">检验结果</div>
                        </div>
                    </div>
                    <div v-for="(item, index) in receivedDataList" :key="index" class="tableRow">
                        <div class="columnNumber">{{ item.number }}</div>
                        <div class="columnStatus">
                            {{ item.type }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 操作面板 -->
        <div class="checkTop" style="height: 300px;">
            <div class="monitor-panel">
                <!-- 开启监控 -->
                <div class="toggle-section">
                    <div class="camara">
                        <span>开启监控画面</span>
                        <label class="switch">
                            <input type="checkbox" v-model="monitorEnabled" @change="toggleCamera" />
                            <span class="slider"></span>
                        </label>
                    </div>
                    <!-- 日期 -->
                    <div class="date-display">日期: {{ currentDate }}</div>
                </div>
                <!-- 机器识别 -->
                <div class="machine-recognition">
                    <div class="title">机器自动识别</div>

                    <div class="info">
                        <div class="infoText">物品编号信息</div>
                        <div class="infoBox">{{ latestNumber }}</div>
                    </div>
                    <div class="info">
                        <div class="infoText">物品分类结果</div>
                        <div class="infoBox">{{ latestType }}</div>
                    </div>
                    <div class="info">
                        <div class="infoText">检测结果</div>
                        <div class="infoBox">{{ latestIsQualified }}</div>
                    </div>
                </div>
                <!-- 人工选择 -->
                <div class="machine-recognition">
                    <div class="title">人工处理</div>
                    <!-- 物品编号信息 -->
                    <div class="info">
                        <div class="infoText">物品分类结果</div>
                        <div class="infoBox">
                            {{damageList.find(option => option.type === finalSelection)?.name || '未选择分类'}}
                        </div>

                    </div>
                    <div class="info">
                        <div class="infoText">检测结果</div>
                        <div class="infoBox">
                            <select v-model="isQualify">
                                <option value="合格">合格</option>
                                <option value="不合格">不合格</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <button class="submitButton" @click=isAcheck>
                            提交
                        </button>
                    </div>
                </div>
            </div>
            <!-- 选择结果 -->
            <div class="OptionList">
                <div class="resultHeader">分类选择</div>
                <div class="options-container">
                    <div v-for="option in damageList" :key="option.type" class="option"
                        :class="{ selected: option.type === finalSelection }" @click="finalSelection = option.type">
                        {{ option.name }} <!-- Display the name -->
                    </div>
                </div>
            </div>
        </div>


    </div>
</template>
<script setup>
import router from '@/router';
import { onMounted } from 'vue';
import { checkData } from './check';
const {
    camera_id,
    monitorEnabled,
    finalSelection,
    damageList,
    currentDate,
    cameraFeed,
    toggleCamera,
    isQualify,
    startWebSocket,
    startCamera,
    serverImage,
    receivedDataList,
    latestNumber,
    latestType,
    latestIsQualified,
    isAcheck,
} = checkData();

// 在组件挂载时启动 WebSocket
onMounted(() => {
    startCamera();  // 页面加载时启动摄像头
    // 延迟 5 秒钟后启动 WebSocket
    setTimeout(() => {
        startWebSocket();  // 延迟启动 WebSocket
    }, 5000);  // 延迟 5 秒（5000 毫秒）
});

</script>

<style scoped>
@import '../check/check.scss';
</style>
